animation 屬性包含了多個子屬性(sub-properties)，name和duration為必要值，另外還有其他項目可以依照需求進行設定：

animation-name (必要值)
這邊就是呼喚animation好夥伴@keyframes的地方! 把keyframes後面的自訂名字放在這裡即可使用，若有多個keyframes要設定在同一個網頁元件中，使用逗點隔開即可。

animation-duration (必要值)
動畫的靈魂「時間」設定的地方，以時間作為單位，常用秒s或毫秒ms。

animation-timing-function
定義變化的速率，預設值為linear(平均速率變化)，另外可以使用step、cubic-bezier和定義好的ease/ease-in/ease-out/ease-in-out。
step是個有趣的數值，可以讓播放產生斷點，一步驟一步驟進行播放；如果希望動態是以較順暢的方式，可以以以定義好的ease/ease-in/ease-out/ease-in-out來進行設定，這些數值會比linear更加柔和，速度感也更加流暢。若希望有更客製化的數值來進行操作，可以利用cubic-bezier，建立自己的貝茲曲線去控制動畫的速率變化。

animation-delay
這邊也是與時間相關，設定網頁元件讀取完畢後與動畫開始的間隔時間，可以產生延後開始的效果。單位使用秒s或毫秒ms即可。

animation-iteration-count
設定動畫的重複次數，使用「infinite」即可達成重複播放。

animation-direction
定義動畫播放完畢後是否需反向播放。共有normal、reverse、alternate、alternate-reverse四個值可以設定。normal是順向播放，reverse則是反向，而alternate第一次是以順向的方式播放，第二次則以反向，alternate-reverse則相反。
可以發現若要設定alternate或alternate-reverse，需要與上方的iteration-count搭配使用，定義一次以上的播放次數，這裡的設定才會產生「第二次與第一次為不同方向播放」的效果。

animation-fill-mode
定義元素在動畫播放外(開始前及結束後)的狀態。共有none、forwards、backwards、both四個值可以設定。
預設值為none，也就是說在開始之前與播放結束後的狀態沒有特別設定，會依照動畫之外的css相關設定作呈現。而forwards是停留在keyframes最後to/100%的狀態，backwards則在最一開始from/0%的狀態；而both就會是在開始前以最一開始0%狀態為主、結束後就以結束100%狀態呈現。

animation-play-state
控制動畫的播放狀態。有 pause 和 running 兩個值，預設為running。較常使用於播放控制元件中。

最後複習一下，一起寫在 animation 長這樣子：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

備註：name 和 duration 為必要值。